<template>
  <BasicTable @register="registerTable" :showIndexColumn="false"></BasicTable>
</template>
<script lang="ts" setup>
import { onMounted } from 'vue'
import { BasicTable, useTable } from '@/components/Table';
import { getTableData } from '@/api/dataReport/deviceParamComparison';
import { getMergedColumns, calculateIndexColumn } from '@/utils/tableUtil'

onMounted(() => {
  setLoading(true)
});

const [registerTable, { setColumns, setTableData, setLoading }] = useTable({
  columns: [],
  pagination: false,
  title: '本周期数据对比',
});

const formatHeader = (headerData, tableData) => {
  const headerList = headerData.map(item => ({
    title: item,
    dataIndex: item,
    width: 100
  }))
  headerList.unshift(
    // {
    //   title: '序号',
    //   dataIndex: 'index',
    //   width: 60,
    //   fixed: 'left',
    //   merge: true,
    // },
    {
      title: '设备名称',
      dataIndex: 'classifyName',
      width: 120,
      fixed: 'left',
    },
    {
      title: '项目',
      dataIndex: 'itemName',
      width: 120,
      fixed: 'left'
    })
  headerList.push({
    title: '总计',
    dataIndex: 'totalCount',
    width: 100,
    fixed: 'right'
  })
  const mergedColumns = getMergedColumns(headerList, tableData);
  setColumns(mergedColumns);
}

const formatTableData = (tableData) => {
  const data = tableData.map((item, index) => {
    const { dataMap, ...others } = item
    return {
       ...dataMap, ...others, index
    }
  })
  // 后端返回的表格数据里，有不相邻的多个classifyName
  const newData = calculateIndexColumn(data, 'classifyName')
  setTableData(newData)
  return newData
}

const setData = (header, tableData) => {
  const formatData = formatTableData(tableData)
  formatHeader(header, formatData)
}

const getData = (searchInfo) => {
  setLoading(true)
  getTableData(searchInfo).then(res => {
    setData(res.dateTimeList, res.dataVoList)
  }).catch(e => {
    setData([], [])
  }).finally(() => {
    setLoading(false)
  })
}


defineExpose({
  getData
})


</script>
